// 角色管理
.tabs-item {
  padding-bottom: 60px;
  width: 100%;
  height: 100%;
  position: relative;

  .add-role {
    position: absolute;
    top: -65px;
    right: 0;
    z-index: 99;
  }

  .page {
    position: absolute;
    height: 40px;
    display: flex;
    align-items: center;
    bottom: 0px;
    right: 0px;
  }
}
.page-list {
  width: 100%;
  height: 100%;
  background-color: #fff;
  margin-top: 20px;

  ::v-deep .el-table::before {
    height: 0;
  }
  ::v-deep .el-table {
    td,
    th {
      padding: 20px 0;
    }
    td,
    th {
      border-bottom: unset;
    }
    td {
      background: #f5f7fa;
    }
    .el-table__row--striped td {
      background: #fff !important;
    }
  }

  .name-avatar {
    display: flex;
    align-items: center;

    .avatar-itme {
      width: 40px;
      height: 40px;
      border-radius: 20px;
      margin-right: 10px;
    }
  }
  .btn-group {
    display: flex;

    .btn-item {
      color: #3d7fff;
      cursor: pointer;
      margin-right: 10px;
    }
  }
}

.role-main {
  .jump {
    color: #3b75ff;
    cursor: pointer;
    text-decoration: underline;
  }
  .role-info {
    ::v-deep .el-form-item {
      margin-right: 30px;
    }
    ::v-deep .el-form-item + .el-form-item {
      .el-form-item__content {
        width: 500px;
      }
    }
  }

  .perlabel::before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }
  .perlabel {
    position: relative;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    font-weight: 700;
    margin-bottom: 5px;
  }
  .permission-list {
    border: 1px solid #dde2ee;
    border-radius: 4px;
    max-height: 600px;
    overflow: auto;

    .el-checkbox-group {
      font-size: 14px;
    }

    .item-tr:last-child {
      border-bottom: unset;
    }
    .item-tr {
      border-bottom: 1px solid #dde2ee;
      display: flex;

      .item1-td {
        border-right: 1px solid #dde2ee;
        width: 100px;
        padding: 10px;
        display: flex;
        align-items: center;
      }

      .item2-td {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        position: relative;

        .item2-tr:last-child {
          border-bottom: unset;
        }
        .item2-tr {
          display: flex;
          border-bottom: 1px solid #dde2ee;

          .item2-td-main {
            border-right: 1px solid #dde2ee;
            width: 130px;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            justify-content: center;

            .item2-td-name {
              width: 100px;
              overflow: hidden;
            }
          }

          .item3-td {
            width: 730px;
            padding: 10px 15px 0;
            display: flex;
            flex-wrap: wrap;

            .item-fun {
              margin-right: 15px;
              margin-bottom: 10px;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}

::v-deep .el-dialog {
  top: calc(50% - 15vh);
  transform: translate(0, -50%);
  border-radius: 8px;
}
